<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/common.js"></script>
    <style>
        #overlay {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5; /* 透明度 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100; /* 此处的图层要大于页面 */
            right: 0;
            bottom: 0;
        }
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
        .fh-div{
            width: 80%;
            height: 166px;
            position: fixed;
            top:100px;
            z-index: 1111;
            left: 10%;
            background: #fff;
        }
        .fh-btn{
            height: 40px;
            width: 50%;
            text-align: center;
            color: #333;
            line-height: 40px;
            float: left;
            font-size: 18px;

        }
        .fh-btncancel{
            float: left;
            height: 40px;
            width: 48%;
            text-align: center;
            color: #333;
            line-height: 40px;
            font-size: 18px;

        }
        .fhbtn{
            width: 50%;
            float: right;
            background: #fa4535;
            border-radius: .04rem;
            color: #fff;
        }
        .fhbtns{
            width: 100px;
            float: right;
            background: #fa4535;
            border-radius: .04rem;
            color: #fff;
            text-align: center;
            line-height: 30px;
            margin-top: 5px;
        }
        .input-mo{
            padding: 0 10px;
            box-sizing: border-box;
            border: none;
        }
        #overlay{
            display: block;
        }
        .content div{
            float: none;
        }
        
        .title i{
        	flex: initial;
        }
        .produce_info{
        	width: 2.7rem;
        }
        .produce_info b{
        	font-weight: 100;
        	font-size: 0.14rem;
        	width: 2.5rem;
        	display: block;
        	margin-left: 0.05rem;
        	font-weight: bold;
        }
        .produce_info .address{
        	font-size: 0.14rem;
        	width: 2.5rem;
        }
        .content .address{
        	font-size: 0.14rem;
        	
        	font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="overlay" v-if="isfahuo">
    </div>
    <div class="Buyer-order bc-gray">
        <div class="hd flex">
            <a href="javascript:;" @click="tab(0)" :class="{active:isActive[0]}">全部</a>
            <a href="javascript:;" @click="tab(1)" :class="{active:isActive[1]}">未付款</a>
            <a href="javascript:;" @click="tab(2)" :class="{active:isActive[2]}">待发货</a>
            <a href="javascript:;" @click="tab(3)" :class="{active:isActive[3]}">待收货</a>
            <a href="javascript:;" @click="tab(4)" :class="{active:isActive[4]}">售后</a>
        </div>
        <div class="bd">
            <div v-if="all.list.length == 0" style="text-align: center;margin-top: 100px;">暂无订单</div>
            <div v-else>
                <div class="bd-1 bd-0 " style="display: block;">
                    <ul>
                        <li v-for="item in all.list"  style="margin-bottom:.08rem;">
                            <div v-for="it in item.ps">
                                <div class="title flex" >
                                    <img :src="it.store_image" alt="">
                                    <span>{{it.store_name}}</span>
                                    <em></em>
                                    <i v-if="item.order_Msg == '待评价未打款'">待评价</i>
                                    <i v-else>{{item.order_Msg}}</i>
                                    <span style="color:#f00">{{it.produce[0].status==0?'(产品)':'(私人订制)'}}</span>
                                </div>
                                <div class="content clearfix">
                                    <section v-for='itemsss in it.produce' class="clearfix produce" style="margin-bottom:.08rem;">
                                        <img :src="itemsss.produceHeadImage.split(',')[0]" alt="" @click="lookinf(this)">
                                        <div class="produce_info" style="float: left;">
                                        	<div style="float: none;width: 2.5rem;height: 0.6rem;line-height: 0.2rem;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;" @click="lookinf(this)">
	                                            {{itemsss.produceDescribe}}
	                                        </div>
	
		                                    <p style="margin-left:0.05rem">
		                                        <span>共<font class="num">1</font>件商品 合计:</span>
		                                        <em>￥<font class="price">{{it.produce_unit_price*it.produce_num}}</font></em>
		                                        <i>(含运费￥0.00)</i>
		                                    </p>
		                                    <b class="name" v-if="item.order_Msg == '待发货'">收货人：{{it.name}}</b>
                                    		<b class="tel" v-if="item.order_Msg == '待发货'">收货电话：{{it.phone}}</b>
		                                    <div class="address" v-if="item.order_Msg == '待发货'">收货地址：{{it.addDesc}}</div>
		                                    <p class="fhbtns" v-if="item.order_Msg == '待发货'" @click="ljfh(it.order_id)">立即发货</p>
		                                    <p class="fhbtns" v-if="item.order_Msg == '待收货'" @click="ckwl(it.order_id,itemsss.produceHeadImage.split(',')[0],itemsss.produceDescribe)">查看物流</p>
		                                    <p class="fhbtns" v-if="state == 4" @click="shcl(it.order_id,it.statusRemind,it.order_total_price,it.trackNum,it.produce[0].produceHeadImage.split(',')[0])">售后处理</p>
                                        </div>
                                        
                                    </section>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="fh-div" v-show="isfahuo" >
        <div style="font-size: 18px;color: #333;text-align: center;line-height: 60px;">填写单号</div>
        <div style="border: solid 1px #666666;color: #333;font-size: 14px;border-radius:4px;line-height: 40px;width: 80%; margin: 0 auto;">
            <input type="text" class="input-mo" placeholder="请填写快递单号" v-model="trackNum">
        </div>
        <div style="position: absolute;bottom: 0;left: 0;right: 0;border-top: solid 1px #f2f2f2;">
            <div class="fh-btncancel" @click="cancel" style="border-right: solid 1px #f2f2f2;">取消</div>
            <div class="fh-btn" @click="truefh">确认</div>
        </div>
    </div>
</body>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {
                    pay_type: ['未付款', '待发货', '待收货', '售后'],
                    button_type: {
                        '未付款': '提醒付款',
                        '待发货': '立即发货',
                        '待收货': '查看物流',
                        '售后': '确认收货'
                    },
                    uid:'',
                    state:'5',
                    isActive:[true,false,false,false,false],
                    all:[],
                    isfahuo:false,
                    trackNum:'',
                    oid:'',
					sid:''
                },
                ready: function () {
                    var _self = this;
                    var tab_num = getQueryString("tab_num");
                    this.uid = sessionStorage.getItem("uid");
                    this.sid = sessionStorage.getItem("s_id");
                    if(tab_num == 1){
                        _self.state = 1;
                        _self.isActive = [false,true,false,false,false];
                    }else if(tab_num == 2){
                        _self.state = 2;
                        _self.isActive = [false,false,true,false,false];
                    }else if(tab_num == 3){
                        _self.state = 3;
                        _self.isActive = [false,false,false,true,false];
                    }else if(tab_num == 4){
                        _self.state = 4;
                        _self.isActive = [false,false,false,false,true];
                    }else if(tab_num == 5){
                        _self.state = 5;
                        _self.isActive = [true,false,false,false,false];
                    }
                    _self.getSellorder();
                    _self.getSellorder_all_num();
                },
                methods: {
                		lookinf:function(t){
		            		if(t.it.produce[0].status ==1||t.it.produce[0].status == 2){
		            			window.location.href = 'personaldetail.html?p_id='+t.it.produce[0].produceId+'&o_id='+t.it.order_id+'&flag_us=1'
		            		}else{
		            			window.location.href = "buy-info-page.3.html?p_id="+t.it.produce[0].produceId
		            		}
                		},
                    ljfh:function(oid){
                        var _self = this;
                        _self.isfahuo = true;
                        //console.log(oid);
                        _self.oid = oid;

                    },
                    truefh:function (){
                        var _self = this;
                        if(_self.trackNum == '' || _self.trackNum == 'undefined' || _self.trackNum == undefined || _self.trackNum == null ){
                            alert("请填写快递单号");
                            return false;
                        }
                        this.$http.get(base_url+"ZITAOHUI/user/ship",{
                            params:{
                                orderid:_self.oid,
                                trackNum:_self.trackNum
                            }
                        }).then(function(res){
                            //console.log(res);
                            if(res.body.code == 1){
                                alert("发货成功");
                                _self.isfahuo = false;
                                window.location.href = window.location.href;
                            }

                        })
                    },
                    shcl:function (id,status,money,trackNum,img){
                      //售后处理
                        window.location.href = "Sellers-sh.html?oid="+id+"&status="+status+"&price="+money+"&trackNum="+trackNum+"&img="+img;
                    },
                    ckwl:function (oid,img,pro){
                        window.location.href = "View-Logistics.html?oid="+oid+"&img="+img+"&pro="+encodeURI(encodeURI(pro));
                    },
                    cancel:function (){
                      var _self = this;
                      _self.isfahuo = false;
                      _self.trackNum = '';
                    },
                    
                    getSellorder_all_num:function (){//获取到各个状态的数量，并且显示到右上角
                        var _self = this;
                        this.$http.get(base_url + 'ZITAOHUI/user/orderNum', {
                            params: {
                            	//userId,identity,state
                                userId: _self.uid,
                                identity: 2,//2代表卖家，
                                storeId:_self.sid
                                //state:_self.state //不传表示全部
                            }
                        }).then(function (response) {
                                //console.log(response);
                                var arr = ['全部','未付款','待发货','待收货','售后'];
                                var arrnum= [];
                                var arrnum= new Array();
	                            for(var i=0;i<response.data.extend.num.length;i++){
	                            	//console.log(response.data.extend.num[i].user_order_num);
	                            	arrnum[i] = response.data.extend.num[i].user_order_num;
	                            }
                                for(var i=0;i<arr.length;i++){
                                		$('.hd a').eq(i).text( arr[i]+"("+ (arrnum[i] < 100 ? arrnum[i]:"99+")+")" )
                                }
                                $('.hd a').eq(4).text( arr[4]+"("+ (arrnum[i] < 100 ? arrnum[i]:"99+")+")" )
                            }, function (data) {
                                //console.log('erroe'+data);
                        })
                    },
                    
                    getSellorder:function (){
                        var _self = this;
                        this.$http.get(base_url + 'ZITAOHUI/user/order', {
                            params: {
                                userId: _self.uid,
                                value: 2,//2代表卖家，
                                state:_self.state,
                                storeId:_self.sid
                            }
                        })
                            .then(function (response) {
                                var all_data = response.data.extend;
                                this.$set('all', all_data);
                                //console.log(all_data);
                            }, function (data) {
                                //console.log('erroe')

                            })
                    },
                    tab(tabNum){
                        var _self = this;
                        if(tabNum == 0){
                            _self.state = 5;
                            _self.isActive = [true,false,false,false,false];
                        }else if(tabNum == 1){
                            _self.state = 1;
                            _self.isActive = [false,true,false,false,false];
                        }else if(tabNum == 2){
                            _self.state = 2;
                            _self.isActive = [false,false,true,false,false];
                        }else if(tabNum == 3){
                            _self.state = 3;
                            _self.isActive = [false,false,false,true,false];
                        }else if(tabNum == 4){
                            _self.state = 4;
                            _self.isActive = [false,false,false,false,true];
                        }
                        _self.getSellorder();
                    },
                    load_all: function () {
                        var _self = this;
                        //console.log(_self.uid);
                        this.$http.get(base_url + 'ZITAOHUI/user/allOrder', {
                                params: {
                                    userId: _self.uid
                                }
                            })
                            .then(function (response) {
                                var all_data = response.data.extend.list;
                                //console.log(all_data)
                                this.$set('all', all_data);
                                for (var i = 0; i < all_data.length; i++) {
                                    setTimeout(function () {
                                        calc_num(1, i)
                                    }, 100);
                                }

                                function calc_num(tab, aim) {
                                    var _li = document.querySelectorAll('.bd-' + tab + ' ul li');
                                    var ps = all_data;
                                    for (var j = 0; j < ps.length; j++) { 
                                     
                                        var price = 0,
                                            produce = ps[j].order.produce,
                             
                                            num = produce.length;
                                        for (var k = 0; k < num; k++) {
                                            price += produce[k].producePrice;
                                        }
                                        _li[j].getElementsByClassName('num')[0].innerHTML = num;
                                        _li[j].getElementsByClassName('price')[0].innerHTML = price;
                                    }

                                }

                            }, function () {

                            })
                    },
               
                    go_kuaidi:(t)=>{
                        //console.log(t)
                        window.location.href = '../page/Fill-in-the-address.html?order_id='+t.item.order_id
                    }
                }
            })
        })
    </script>


</html>